// 1. 籍贯 饼形图
function setPie(obj) {
    let myChart = echarts.init(document.querySelector('.panel.pie'))
    //首先定义一个空数组 用于存放 请求参数data数据
    let pieData = []
    /*  forEach遍历获取的数据,判断指定省份的人 ,在pieData数组中是否存在
         不存在: push一个对象{ name: item.province,value: 1} 到pieData数组
           存在: pieData指定下标 的对象 的 value++ */
    obj.forEach(item => {
        //findIndex遍历 pieData数组中元素的name(省份)值 与 本次循环item的省份是否相同
        let index = pieData.findIndex(v => v.name === item.province)

        //不存在: push一个对象{ name: item.province,value: 1} 到pieData数组
        if (index == -1) {
            pieData.push({
                name: item.province,
                value: 1
            });

        }
        // 存在: pieData指定下标 的对象 的 value++
        else {
            pieData[index].value++;
        }
    })
    console.log(pieData)

    let option = {
        //不需要图例组件
        //不需要工具栏组件
        //标题
        title: {
            text: '籍贯 Hometown',
            textStyle: {
                color: '#6d767e'
            }
        },
        //(悬停)提示框组件
        tooltip: {
            formatter: '{a} <br> {b} <b>{c}</b>人 {d}%',
        },
        series: [{
            name: '各地人员分布',
            type: 'pie',
            // 内圆半径,外圆半径
            radius: ['20%', '65%'],

            //圆心位置,默认中心
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
                borderRadius: 4
            },
            data: pieData
        }]
    }

    myChart.setOption(option)
    // console.log(myChart)
}
// setPie()


// 2. 地图 (首先要导入echarts/china.js)
function setMap(obj) {
    let myChart = echarts.init(document.querySelector('.map'))

    // 第一个变量 对象 放各地地区坐标(经纬值),必须需要设置一个默认的目的地(顺义校区)
    let mapData1 = {
        "顺义校区": [116.4551, 40.2539]
    }
    // 第二个变量 数组 里面放数组 数组里面放对象
    let mapData2 = []
    obj.forEach(item => {
        // 循环将 经纬 值存入数组(就算有重复的数据 也不用担心,覆盖掉就可以了)
        mapData1[item.county] = [item.jing, item.wei]

        let i = mapData2.findIndex(v => v[0].name == item.county)
        // 数组中如果 没有相同的元素,就添加一个 数组包对象 元素
        if (i == -1) {
            mapData2.push([{
                name: item.county,
                value: 1
            }])
        } else {
            //item是一个个的数组, 我们要用的是 数组中对象里的name属性, item[0].name
            mapData2[i][0].value++
        }
    })
    console.log(mapData1, mapData2)
    // 位置 + 经纬度
    var chinaGeoCoordMap = mapData1
    var chinaDatas = mapData2
    console.log(chinaDatas)

    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = chinaGeoCoordMap[dataItem[0].name];
            var toCoord = [116.4551, 40.2539]; // 目标点经纬度（北京顺义校区）
            if (fromCoord && toCoord) {
                res.push([{
                    coord: fromCoord,
                    value: dataItem[0].value
                }, {
                    coord: toCoord,
                }]);
            }
        }
        return res;
    };
    var series = [];
    [
        ['顺义校区', chinaDatas]
    ].forEach(function (item, i) {
        series.push({
                type: 'lines',
                zlevel: 2,
                effect: {
                    show: true,
                    period: 4, //箭头指向速度，值越小速度越快
                    trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                    symbol: 'arrow', //箭头图标
                    symbolSize: 5, //图标大小
                },
                lineStyle: {
                    normal: {
                        width: 1, //尾迹线条宽度
                        opacity: 1, //尾迹线条透明度
                        curveness: 0.2 //尾迹线条曲直度
                    }
                },
                data: convertData(item[1])
            }, {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: { //涟漪特效
                    period: 4, //动画时间，值越小速度越快
                    brushType: 'stroke', //波纹绘制方式 stroke, fill
                    scale: 4 //波纹圆环最大限制，值越大波纹越大
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right', //显示位置
                        offset: [5, 0], //偏移设置
                        formatter: function (params) { //圆环显示文字
                            return params.data.name;
                        },
                        fontSize: 12
                    },
                    emphasis: {
                        show: true
                    }
                },
                symbol: 'circle',
                symbolSize: function (val) {
                    return 4 + val[2] * 5; //圆环大小
                },
                itemStyle: {
                    normal: {
                        show: false,
                        color: '#f00'
                    }
                },
                data: item[1].map(function (dataItem) {
                    return {
                        name: dataItem[0].name,
                        value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                    };
                }),
            },
            //被攻击点
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    period: 4,
                    brushType: 'stroke',
                    scale: 4
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        offset: [5, 0],
                        color: '#9eca7f', // 目标点文字颜色
                        formatter: '{b}',
                        textStyle: {
                            color: "#9eca7f"
                        }
                    },
                    emphasis: {
                        show: true,
                        color: "#f60", // 目标点鼠标移入的颜色
                    }
                },
                symbol: 'pin',
                symbolSize: 50,
                data: [{
                    name: item[0],
                    value: chinaGeoCoordMap[item[0]].concat([10]),
                }],
            }
        );
    });

    let option = {
        title: {
            text: '来京路线 From',
            textStyle: {
                color: '#6d767e'
            }
        },
        // tooltip: {
        //   trigger: 'item',
        //   backgroundColor: 'rgba(166, 200, 76, 0.82)',
        //   borderColor: '#FFFFCC',
        //   showDelay: 0,
        //   hideDelay: 0,
        //   enterable: true,
        //   transitionDuration: 0,
        //   extraCssText: 'z-index:100',
        //   formatter: function (params, ticket, callback) {
        //     //根据业务自己拓展要显示的内容
        //     var res = "";
        //     var name = params.name;
        //     var value = params.value[params.seriesIndex + 1];
        //     res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
        //     return res;
        //   }
        // },
        // backgroundColor: "#013954",
        // visualMap: { //图例值控制
        //   min: 0,
        //   max: 1,
        //   calculable: true,
        //   show: false,
        //   color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
        //   textStyle: {
        //     color: '#fff'
        //   }
        // },
        geo: {
            map: 'china',
            zoom: 1.2,
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: true, //是否允许缩放
            itemStyle: {
                normal: {
                    // color: 'rgba(51, 69, 89, .5)', //地图背景色
                    // color: '#5a6fc0', //地图背景色
                    // borderColor: '#516a89', //省市边界线00fcff 516a89
                    borderWidth: 1
                },
                emphasis: {
                    color: 'rgba(37, 43, 61, .5)' //悬浮背景
                }
            }
        },
        series: series
    };

    myChart.setOption(option);
}
// setMap()

// 3. 成绩 柱状图
function setBar(obj) {
    let myChart = echarts.init(document.querySelector('.barChart'))
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                //X轴设置了阴影,则交叉X轴会不显示
                type: 'cross'

            }
        },
        grid: {
            top: 30,
            bottom: 30,
            right: '7%',
            left: '7%'
        },
        toolbox: {
            feature: {

            }
        },
        legend: {
            // data: ['平均分', '低于60分人数', '60到80分之间','高于80分人数']
        },
        xAxis: [{
            type: 'category',
            axisTick: {
                alignWithLabel: 0
            },
            //鼠标移入X轴,出现阴影
            axisPointer: {
                type: 'shadow'

            },

            data: obj.group
        }],
        yAxis: [{
                type: 'value',

                min: 0,
                max: 100,
                interval: 10,
                axisLabel: {
                    formatter: '{value}分 '
                }
            },
            {
                type: 'value',
                max: 10,
                min: 0,
                interval: 1,
                axisLabel: {
                    formatter: '{value}人'
                }
            }
        ],
        series: [{
                name: '平均分',
                type: 'bar',
                barWidth: '15',
                data: obj.avgScore
            },
            {
                name: '低于60分人数',
                type: 'bar',
                yAxisIndex: 1,
                barWidth: '15',
                data: obj.lt60
            },
            {
                name: '60到80分之间',
                type: 'bar',
                yAxisIndex: 1,
                barWidth: '15',
                data: obj.gt60
            },
            {
                name: '高于80分人数',
                type: 'bar',
                yAxisIndex: 1,
                barWidth: '15',
                data: obj.gt80
            }
        ]
    };
    myChart.setOption(option)
}
// setBar()

// 4薪资 折线图
function setLine(obj) {
    // let arr = {
    //     name = [],
    //     salary = [],
    //     truesalary = []
    // }
    let name = [],
        salary = [],
        truesalary = []

    obj.forEach(item => {
        name.push(item.name)
        salary.push(item.salary)
        truesalary.push(item.truesalary)
    })

    let myChart = echarts.init(document.querySelector('.line'))
    let option = {
        tooltip: {
            trigger: 'axis',
            position: function (pt) {
                return [pt[0], '10%'];
            }
        },
        title: {
            text: '薪资 Salary',
            textStyle: {
                color: '#6d767e',
            }
        },
        legend: {
            top: 20
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: name
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '50%']
        },
        dataZoom: [
            // {
            //       type: 'inside',
            //       start: 0,
            //       end: 10
            //   },
            {
                //默认值:slider
                start: 0,
                end: 20
            }
        ],
        series: [{
            name: '期望薪资',
            type: 'line',
            symbol: 'none',
            itemStyle: {
                color: 'rgb(255, 70, 131)'
            },
            smooth: 'true',
            data: salary
        }, {
            name: '实际薪资',
            type: 'line',
            symbol: 'none',
            smooth: '1',
            itemStyle: {
                color: '#5c7bd9'
            },

            data: truesalary
        }, ]
    };
    myChart.setOption(option)
}
// setLine()

// 需求1 :班级概况
// 页面加载后, 直接发送ajax获取数据, 渲染到页面上

axios({
    url: '/student/overview',

}).then(({
    data: res
}) => {
    // 成功状态码==0
    // 渲染 班级人数,期望薪资,平均年龄,男女比例
    if (res.code == 0) {
        document.querySelector('.total').innerHTML = res.data.total
        document.querySelector('.avgSalary').innerHTML = res.data.avgSalary
        document.querySelector('.avgAge').innerHTML = res.data.avgAge
        document.querySelector('.proportion').innerHTML = res.data.proportion
    }
})

// 需求2 : 点击按钮 显示隐藏成绩区域
let btn = document.querySelector('.bar .btn')
let ul = document.querySelector('.bar ul')
btn.onclick = function () {
    if (ul.style.display == 'none') {
        ul.style.display = 'block'
    } else {
        ul.style.display = 'none'
    }
}

// 需求3 : 渲染柱状图  给所有a链接绑定 点击事件
let as = ul.querySelectorAll('a')
// querySelectorAll() 获取的是伪数组, 所以不用forEach
// as = Array.from(as)
// as = [...as]
for (let i = 0; i < as.length; i++) {
    as[i].onclick = function () {

        //发送ajax,获取 指定次数的成绩信息(第一次,第二次...)
        axios({
            url: '/score/batch',
            method: 'get',
            params: {
                batch: i + 1
            }
        }).then(({
            data: res
        }) => {
            // console.log(res.data)
            //调用 渲染柱状图函数, 将对象作为实参传入
            if (res.code == 0) {
                setBar(res.data)
            }
        })
    }
}
//页面一加载,触发点击事件 (第一次成绩)
as[0].click()

// 需求4: 渲染折线图
// 需求5: 渲染饼图
// 需求6: 渲染地图 (4,5,6数据来源于同一个接口)
axios({
    url: '/student/list',
    method: 'get',
}).then(({
    data: res
}) => {

    console.log(res.data)
    if (res.code == 0) {
        setLine(res.data)
        setPie(res.data)
        setMap(res.data)
    }

})